﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta content="" name="description"/>
    <meta content="webthemez" name="author"/>
    <title>统计图表</title>
    <jsp:include page="../part/manager.css.jsp"></jsp:include>
</head>
<body>
<div id="wrapper">
    <!--头部：页面标题栏-->
    <jsp:include page="../part/manager.header.jsp"></jsp:include>
    <!--导航栏：页面菜单栏-->
    <jsp:include page="../part/manager.menu.jsp"></jsp:include>

    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">起飞时间数量情况散点图</div>
                        <div class="panel-body">
                            <div id="quantity-scatter-echarts" style="width:470px;height:300px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">机场每四个小时出发机型数折线图</div>
                        <div class="panel-body">
                            <div id="quantity-line-echarts" style="width:470px;height:300px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">不同机场机型种类分布雷达图</div>
                        <div class="panel-body">
                            <div id="quantity-radar-echarts" style="width:470px;height:300px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">某天内西安出发机型占比饼图</div>
                        <div class="panel-body">
                            <div id="quantity-doughnut-echarts" style="width:470px;height:300px"></div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">机型准点率柱状图</div>
                        <div class="">
                            <div id="quantity-bar-echarts" style="width:940px;height:300px"></div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<jsp:include page="../part/manager.js.jsp"></jsp:include>
</body>
<script type="text/javascript">
    //初始化好X轴或图表数据的数组
    //散点图
    var types = new Array();
    var nums = new Array();

    var fdata = new Array();
    var qceChart = echarts.init(document.getElementById("quantity-scatter-echarts"));
    //发起ajax请求，向后台获取数据，填充数组
    $.post("getTakeOffTime", {}, function (data) {
        console.log(data);
        // var jsonObj = JSON.parse(data);
        $.each(data, function () {
            types.push(this.time);
            nums.push(this.account);
        });
        for (var i = 0; i < nums.length; i++) {
            fdata[i] = [types[i], nums[i]];
        }
        //使用数组填充图表配置项Option
        var qceOption = {
            tooltip: {
                formatter: '{c}'
            },
            xAxis: {max: 24, interval: 4},
            yAxis: {},
            series: [{
                data: fdata,
                type: 'scatter'
            }]
        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qceChart.setOption(qceOption);
    });
    //饼状图
    var names = new Array();
    var qdeShow = [];
    var qdeChart = echarts.init(document.getElementById("quantity-doughnut-echarts"));
    $.post("getStartPointAccount", {}, function (data) {
        // var jsonObj = JSON.parse(data);
        $.each(data, function () {
            var qdeTempShow = {};
            qdeTempShow.value = this.account;
            qdeTempShow.name = this.pid;
            qdeShow.push(qdeTempShow);
            // names.push(this.month);
            // values.push(this.flightcount);
        });
        //使用数组填充图表配置项Option
        var qdeOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: names
            },
            series: [
                {
                    name: '机型占比',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: qdeShow,
                }
            ]
        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qdeChart.setOption(qdeOption);
    });
    //雷达图
    var PEKflight = new Array();
    var CANflight = new Array();
    var SZXflight = new Array();
    var flightnum = new Array();
    var qreChart = echarts.init(document.getElementById("quantity-radar-echarts"));
    $.post("getDepartureFlightTypeAccount", {}, function (data) {
        $.each(data, function () {
            flightnum.push(this);
        });
        for (var i = 0; i < 6; i++) {
            PEKflight[i] = Number(flightnum[i]);
            CANflight[i] = Number(flightnum[i + 6]);
            SZXflight[i]=Number(flightnum[i+12]);
        }
        //使用数组填充图表配置项Option
        var qreOption = {
            tooltip: {},
            radar: {
                //shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    {name: 'A330', max: 400},
                    {name: 'A319', max: 400},
                    {name: 'A321', max: 2000},
                    {name: 'B737', max: 2000},
                    {name: 'A320', max: 2000},
                    {name: '其他', max: 400}
                ]
            },
            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: PEKflight,
                        name: '北京首都国际机场'
                    },
                    {
                        value: CANflight,
                        name: '广州白云国际机场'
                    },
                    {
                        value: SZXflight,
                        name: '深圳宝安国际机场'
                    },
                ]
            }]
        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qreChart.setOption(qreOption);
    });
    //柱状图
    var types1 = new Array();
    var nums1 = new Array();
    var qbeChart = echarts.init(document.getElementById("quantity-bar-echarts"));
    //发起ajax请求，向后台获取数据，填充数组
    $.post("getPunctuality", {}, function (data) {
        // var jsonObj = JSON.parse(data);
        $.each(data, function () {
            types1.push(this.pid);
            nums1.push(this.punctuality);
        });
        //使用数组填充图表配置项Option
        var qbeOption = {
            xAxis: {
                type: 'category',
                data: types1,
                axisTick: {    // 坐标轴 刻度
                    show: true,  // 是否显示
                    inside: true,  // 是否朝内
                    length: 10,     // 长度

                },
                axisLabel:{
                    interval:0,
                    rotate:45,
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: nums1,
                type: 'bar',
                barWidth : 15,
                barCateGoryGap:10
            }]
        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qbeChart.setOption(qbeOption);
    });
    //折线图
    var flynames = new Array();
    var flynums = new Array();
    var time = new Array();
    var account1 = new Array();
    var account2 = new Array();
    var account3 = new Array();
    var account4 = new Array();
    var qleChart = echarts.init(document.getElementById("quantity-line-echarts"));
    //发起ajax请求，向后台获取数据，填充数组
    $.post("getEveryTwoHourAccount", {}, function (data) {
        // var jsonObj = JSON.parse(data);
        $.each(data, function () {
            flynames.push(this.cname);
            flynums.push(this.account);
            time.push(this.hour);
        });
        for (var i = 0; i < 7; i++) {
            account1[i] = flynums[4 * i];
            account2[i] = flynums[4 * i + 1];
            account3[i] = flynums[4 * i + 2];
            account4[i] = flynums[4 * i + 3];
        }
        //使用数组填充图表配置项Option
        var qleOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: flynames
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['0点', '4点', '8点', '12点', '16点', '20点', '24点']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: flynames[0],
                type: 'line',
                stack: '总量',
                data: account1
            },
                {
                    name: flynames[1],
                    type: 'line',
                    stack: '总量',
                    data: account2
                },
                {
                    name: flynames[2],
                    type: 'line',
                    stack: '总量',
                    data: account3
                },
                {
                    name: flynames[3],
                    type: 'line',
                    stack: '总量',
                    data: account4
                }]
        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qleChart.setOption(qleOption);
    });

</script>
</html>